﻿<template>
  <el-row :gutter="20">
    <el-col :span="spanLeft">
      <div class="top-op">
        <div class="top-left">
          <el-button @click = 'onBack' size = 'mini' icon = 'iconfont icon-xitongfanhui'>返回</el-button>
          <el-button type = 'info' @click = 'resetForm' size = 'mini' icon = ''>取消</el-button>
          <el-button type = 'primary' @click = 'submitForm' size = 'mini'>确定</el-button>
        </div>
        <div class="top-center"></div>
        <div class="top-right">
          <el-button @click = 'hideRight' v-show="rightBtnShow" size = 'medium'><i class="iconfont icon-icon-GIS_zhankai el-icon--right"></i></el-button>
          <el-button @click = 'showRight' v-show="leftBtnShow" size = 'medium'><i class="iconfont icon-icon-GIS_shouqi el-icon--right"></i></el-button>
        </div>
      </div>
      <Form-Layout :data="formData" :select.sync="selectFormItem" :commonConfig="formData.pageConfig"></Form-Layout>
    </el-col>
    <el-col :span="spanRight">
      <el-tabs v-model = 'currentTab' stretch>
        <el-tab-pane label = '组件/页面属性' name = 'currentPage'>
          <Form-Config :data = 'formData'></Form-Config>
        </el-tab-pane>
        <el-tab-pane label = '当前元素' name = 'currentFormItem'>
          <Form-Item-Config v-if="selectFormItem && selectFormItem.config && selectFormItem.config.uid" :key="selectFormItem.config.uid + '_config'" :formItemConfig = 'selectFormItem' :formDataList = 'allSingleModel'></Form-Item-Config>
        </el-tab-pane>
      </el-tabs>
    </el-col>
  </el-row>
</template>

<script>
import draggable from 'vuedraggable'
// 主体内容展示的区域
import FormLayout from './FormLayout.vue'
// 右侧单个字段的详细设置
import FormItemConfig from './FormItemConfig'
// 当前页面/组件的信息
import FormConfig from './FormConfig.vue'
export default {
  props: ['currentRow', 'showEditContentDialog', 'from'],
  data () {
    return {
      formData: {
        list: [],
        pageConfig: {
          name: '',
          width: 50,
          size: 'medium',
          // 页面事件
          events: [],
          // 页面事件字典表
          eventsDictionary: {}
        }
      },
      spanLeft: 18,
      spanRight: 6,
      showRightClick: 0,
      hiddeRightClick: 2,
      rightBtnShow: true,
      leftBtnShow: false,
      selectFormItem: null,
      currentTab: 'currentPage',
      // 所有的单个元素
      allSingleModel: [],
      currentPageUid: ''
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.judgeDialogOpen()
    })
  },
  methods: {
    hideRight () {
      switch (this.hiddeRightClick) {
        case 0:
          this.spanLeft = 14
          this.spanRight = 10
          this.leftBtnShow = false
          this.rightBtnShow = true
          this.hiddeRightClick = 1
          break
        case 1:
          this.spanLeft = 16
          this.spanRight = 8
          this.leftBtnShow = false
          this.rightBtnShow = true
          this.hiddeRightClick = 2
          break
        default:
          this.spanLeft = 24
          this.spanRight = 0
          this.leftBtnShow = true
          this.rightBtnShow = false
          this.hiddeRightClick = 0
          break
      }
    },
    showRight () {
      switch (this.showRightClick) {
        case 0:
          this.spanLeft = 18
          this.spanRight = 6
          this.leftBtnShow = true
          this.rightBtnShow = false
          this.showRightClick = 1
          break
        case 1:
          this.spanLeft = 14
          this.spanRight = 10
          this.leftBtnShow = true
          this.rightBtnShow = false
          this.showRightClick = 2
          break
        default:
          this.spanLeft = 12
          this.spanRight = 12
          this.leftBtnShow = false
          this.rightBtnShow = true
          this.showRightClick = 0
          break
      }
    },
    // 获取所有的单个元素
    getAllSingleModel (itemList) {
      this.allSingleModel = []
      if (itemList.length) {
        itemList.forEach((item, index) => {
          this.allSingleModel.push(item)
        })
      }
    },
    // 判断是否打开了编辑页面的弹窗
    judgeDialogOpen () {
      if (this.showEditContentDialog) {
        this.currentPageUid = this.currentRow.uid
        if (this.currentRow.settings) {
          this.formData = JSON.parse(this.currentRow.settings)
          this.formData.pageConfig.name = this.currentRow.name
          if (this.formData.list.length) {
            this.selectFormItem = this.formData.list[0]
          }
        } else {
          this.formData = {
            list: [],
            pageConfig: {
              name: '',
              width: 50,
              size: 'medium',
              // 页面事件
              events: [],
              // 页面事件字典表
              eventsDictionary: {}
            }
          }
          this.selectFormItem = ''
        }
      }
    },
    // 取消
    resetForm () {
      this.$emit('resetForm')
    },
    // 确定
    submitForm () {
      if (this.from === 'workflow') {
        if (this.formData.pageConfig.launchWorkflow) {
          // 以流程发起界面为准，当有流程发起界面时，流程配置界面就为false
          this.formData.pageConfig.hadWorkflow = false
          this.formData.pageConfig.relatedWorkflow = ''
          this.formData.pageConfig.relatedWorkflowNode = ''
          this.formData.pageConfig.workflowBtnEvents = []
          if (!this.formData.pageConfig.relatedWorkflowCode) {
            this.$message({
              message: '当为流程发起界面时，必须选择流程code',
              type: 'warning'
            })
          } else {
            let obj = {
              category: this.formData.pageConfig.relatedWorkflowName,
              jsonData: JSON.stringify(this.formData)
            }
            this.$emit('submitForm', obj)
          }
        } else {
          this.formData.pageConfig.relatedWorkflowCode = ''
          if (!this.formData.pageConfig.hadWorkflow) {
            this.formData.pageConfig.relatedWorkflow = ''
            this.formData.pageConfig.relatedWorkflowName = ''
            this.formData.pageConfig.relatedWorkflowNode = ''
            this.formData.pageConfig.workflowBtnEvents = []
            let obj = {
              category: this.formData.pageConfig.relatedWorkflowName,
              jsonData: JSON.stringify(this.formData)
            }
            this.$emit('submitForm', obj)
          } else {
            if (!this.formData.pageConfig.relatedWorkflow || !this.formData.pageConfig.relatedWorkflowNode) {
              this.$message({
                message: '当页面配置流程图时，必须选择流程名称、流程节点',
                type: 'warning'
              })
            } else {
              let obj = {
                category: this.formData.pageConfig.relatedWorkflowName,
                jsonData: JSON.stringify(this.formData)
              }
              this.$emit('submitForm', obj)
            }
          }
        }
      } else {
        let obj = {
          category: this.formData.pageConfig.relatedWorkflowName,
          jsonData: JSON.stringify(this.formData)
        }
        this.$emit('submitForm', obj)
      }
    },
    onBack () {
      this.$router.back()
    }
  },
  watch: {
    showEditContentDialog: {
      handler: function (val, oldVal) {
        this.judgeDialogOpen()
      },
      deep: true
    },
    selectFormItem: {
      handler: function (val, oldVal) {
        this.getAllSingleModel(this.formData.list)
      },
      deep: true
    }
  },
  components: {
    draggable,
    FormLayout,
    FormConfig,
    FormItemConfig
  }
}
</script>
<style>
.top-op {
  display: flex;
  display: -ms-flexbox;
  display: -webkit-flex;
}
.top-op .top-left {
  min-width: 300px;
}
.top-op .top-center {
  width: 90%
}
</style>
